<template>
  <div class="my-box">
    <div>Slot子组件看到的操作：</div>
    <div>
      <!-- 匿名插槽 -->
      <slot />
      <!--  具名插槽 -->
      <slot name="title" />
      <!--  作用域插槽 -->
      <slot name="footer" :scope="state" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useSlots, reactive } from 'vue'

type obj = {
  nums?: number
}

const state = reactive({
  name: '张三',
  age: '25岁',
})

const slots = useSlots()
// 匿名插槽使用情况
const defaultSlot = reactive<obj>({ nums: slots.default && slots.default().length })
console.log(defaultSlot.nums) // 1
// 具名插槽使用情况
const titleSlot = reactive<obj>({ nums: slots.title && slots.title().length })
console.log(titleSlot.nums) // 2
</script>

<style scoped>
.my-box {
  display: flex;
}
/* 支持CSS变量注入v-bind(color) */
</style>
